Programmeren 5

JavaScript - Asynchroon programmeren

Doelstelling

1. In deze les leren we wat asynchroon programmeren is.
2. We leren hoe je een eenvoudige third party API aanspreekt.

Na deze les:

• Kan je AJAX in de praktijk toepassen.
• Kan je de MARVEL API aanspreken, gegevens opvragen en presenteren.

Stappenplan

1. Wat is Ajax
2. Het XMLHttpRequest object
3. Marvel - Developer Portal
4. Marvel API - GET personages
5. Filmpje Marvel API - GET personnages
6. Nu we de code gewijzigd hebben moeten we opnieuw synchroniseren met BitBucket.
   Als je de naam van het javascript pad gewijzigd hebt moet je nog het .gitignore bestand aanpassen:

   learn-javascript/.vs
   *.sln
   

   Kan korter door alle .vs mappen te negeren:

   .vs
   *.sln
   

7. Een Ajax bibliotheek
8. Marvel API - Get personages met Ajax bibliotheek
9. We kunnen de AJAX bibliotheek herschrijven met behulp van promises. Promises werden pas in JS6 toegevoegd
   1. JS - Promises
   2. Een moderne ajax bibliotheek
10. Nog een heel mooi voorbeeld:
    Tania Rascia, How to Connect to an API with JavaScript, December 7, 2017
11. Leer werken met de nieuwste ingebouwde Fetch API:
    1. Fetch API op MDN web docs
    2. Tania Rascia, How to Use the JavaScript Fetch API to Get JSON Data,5/3/2018

Opdracht

1. Maak de opdrachten in een map met de naam asynchroon.
2. Herschrijf de Marvel API - GET personages met behulp van Een moderne ajax bibliotheek in een bestand met de naam marvel-GET-met-modern-ajax-library.html.
3. Herschrijf de Marvel API - GET personages met behulpt van de Fetch API in een bestand met de naam marvel-GET-met-Fetch-API.html.
4. Maak de oplossing lokaal in Visual Studio of een IDE naar keuze (PHPStorm, Visual Code, ...) en synhroniseer ze met Bitbucket. Zet in de melding van de commit: "Marvel API opdracht final".